<template>
    <div class="my-tables">
        <el-tabs type="card" v-model="compState.activeName" class="demo-tabs">
            <div class="input_search" style="padding: 5px">
                <el-input v-model="compState.medicalInputFilter" placeholder="输入医疗点关键字筛选" clearable
                    @input="handleSearchMedical" :prefix-icon="Search">
                </el-input>
            </div>
            <el-tab-pane name="first">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Grid />
                        </el-icon>&nbsp;
                        <span>现场实况</span>
                    </span>
                </template>
                <div class="frank_input"></div>
                <!-- {{ compState.medicalPointUserArrCopy }} -->
                <div class="medical_group_list">
                    <el-table :data="compState.medicalPointUserArrCopy" style="width: 100%" max-height="780" height="780"
                        :tree-props="treeProps" row-key="Code" highlight-current-row
                        :default-expand-all="compState.isTableExpand" stripe :header-cell-style="headerCellStyle">
                        <el-table-column label="现场医疗点" prop="Name" show-overflow-tooltip />
                        <el-table-column align="right" width="320px">
                            <template #default="scope">
                                <el-button size="small" @click="handleMedical(scope.row)" :icon="scope.row.IsMedicalPoint ? 'View' : 'VideoCameraFilled'
                                    ">
                                    {{ scope.row.IsMedicalPoint ? '现场监控' : '单兵设备' }}
                                </el-button>
                                <el-button v-if="scope.row.IsMedicalPoint" size="small" @click="linkHeartStatic(scope.row)"
                                    icon="Cpu">
                                    {{ scope.row.IsMedicalPoint ? '心电' : '' }}
                                </el-button>
                                <el-button v-if="scope.row.IsMedicalPoint" size="small" @click="linkHeartStatic(scope.row)"
                                    icon="Cpu">
                                    {{ scope.row.IsMedicalPoint ? '12导联' : '' }}
                                </el-button>
                                <!-- <el-button v-if="scope.row.IsMedicalPoint" size="small" @click="linkAirPlane(scope.row)"
                                    icon="View">
                                    {{ scope.row.IsMedicalPoint ? '无人机' : '' }}
                                </el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { setupMapState } from "../../../store/utils/hook"
import { GetMedicalPointUserList } from 'network/hosVenAmbuListData';
import { GetDanBingPreVedio } from 'network/danbingVideo';
import { GetMaiRui } from 'network/mairui';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
const treeProps = {
    children: 'userList',
}
const compState = reactive({
    activeName: ref('first'),
    medicalInputFilter: "",
    medicalPointUserArr: [],
    medicalPointUserArrCopy: [],
    isTableExpand: false
})
const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
const { userInfoVx } = setupMapState("app", ["userInfoVx"])
const handleSearchMedical = () => {
    // 遍历数据筛选赋值
    compState.medicalPointUserArrCopy = compState.medicalPointUserArr.filter(
        (item) => {
            return item.Name.search(compState.medicalInputFilter) != -1;
        },
    );
}
const handleMedical = (row) => {
    // console.log(row);
    if (row.IsMedicalPoint) {//医疗点
        // console.log(row.DeviceCode);
        if (row.DeviceCode != null && row.DeviceCode != "") {
            GetDanBingPreVedio({ code: row.DeviceCode }).then((res) => {
                // console.log(res);
                window.open(res);
            })
                .catch((err) => {
                    ElMessage({ message: '暂无人员单兵！' + err, type: 'warning' });
                });
        } else {
            ElMessage({ message: '暂未绑定设备！', type: 'warning' });
        }
    } else {//人员
        if (row.EquipmentId != null && row.EquipmentId != "") {
            GetDanBingPreVedio({ code: row.EquipmentId }).then((res) => {
                // console.log(res);
                window.open(res);
            })
                .catch((err) => {
                    ElMessage({ message: '暂无人员单兵！' + err, type: 'warning' });
                });
        } else {
            ElMessage({ message: '暂无人员单兵！', type: 'warning' });
        }

    }
};
const linkHeartStatic = (row) => {
    GetMaiRui({ code: 'A 392WA' }).then((res) => {
        // console.log(res);
        window.open(res);
    })
        .catch((err) => {
            // ElMessage({ message: '暂无心电/12导联！' + err, type: 'warning' });
            ElMessage({ message: '暂无心电/12导联！', type: 'warning' });
        });
}
const linkAirPlane = (row) => {
    // console.log(row.Code)
    if (row.Code == 60001) {
        window.open("http://www.antworkcloud.com/#/OperationMonitor/MonitorDrone")
    } else {
        window.open("http://www.antworkcloud.com/#/OperationMonitor/MonitorDrone")
    }
}

const headerCellStyle = () => {
    return { 'backgroundColor': 'rgba(165, 180, 203, 0.2)' }
}
onMounted(async () => {
    // 判断是否选择了全部的场馆  -1代表的是全部场馆
    if (ACVCodesVx.value.venueCode == -1) {
        ACVCodesVx.value.venueCode = userInfoVx.value.venueCode
    }
    let medicalPointUserRequestRes = await GetMedicalPointUserList(ACVCodesVx.value);
    // 格式化
    medicalPointUserRequestRes.forEach((element) => {
        element.Name = element.Name;
        element.userList.forEach((child) => {
            let type = child.Type == 4 ? "司机" : child.Type == 5 ? "医生" : child.Type == 6 ? "护士" : ""
            child.Name = child.Name + "-" + type + "-" + child.Telephone
        });
    });
    compState.medicalPointUserArr = medicalPointUserRequestRes;
    //复制一份 不影响原数组
    compState.medicalPointUserArrCopy = [...compState.medicalPointUserArr];
})
</script>

<style scoped></style>